<template>
	<base-dropdown :options="list" :modelValue="defaultValue" border>
		<template v-slot="{ data }">
			<div class="flex justify-between mt-5 mb-[18px] py-[10px] cursor-pointer relative">
				<div :class="[{ 'text-t-3': !data?.text && !defaultValue }, 'text-t-1 mr-2']">
					{{ data?.text || defaultValue || placeholder }}
				</div>
				<base-icon name="down2" class="text-t-3"></base-icon>
				<div class="absolute w-full bottom-0 h-[1px] bg-border-3"></div>
			</div>
		</template>
	</base-dropdown>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { enumList, t } from '@/utils'
import { UsdtNetwork } from '@/enums'
import { BaseDropdown, BaseIcon } from '@/components/base'
import { useWalletStore } from '@/store'

defineProps({
	placeholder: String
})

const walletStore = useWalletStore()
const defaultValue = computed(() => walletStore.depositData.cryptoCode || list.value[0]?.text)

const list = computed(() =>
	enumList(UsdtNetwork).map((item: any) => ({
		id: item.id.id,
		titleT:
			item.id.id === UsdtNetwork.trx.id
				? item.id.name + ' (' + t('tip.recommended') + ')'
				: t(item.id.name),
		text: t(item.id.name),
		img: `/usdt-network/${item.id.id}.png`
	}))
)
</script>
